<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 94988
  Date: 2019/10/30
  Time: 14:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
</head>
<%--导入jquery--%>
<script type="text/javascript" src="<c:url value='/res/js/jquery-3.4.1.js'/>"  charset="UTF-8"></script>
<%--导入layui--%>
<script type="text/javascript" src="<c:url value='/res/tool/layui/layui.js'/>"  charset="UTF-8"></script>
<%--导入css--%>
<link rel="stylesheet" type="text/css" href="<c:url value='/res/tool/layui/css/layui.css' />"/>
<%--导入vue--%>

<body>

<div class="layui-card">
    <form class="layui-form" action="<%=request.getContextPath()%>/user/init" method="post">
    <div class="layui-card-header">房屋租赁管理/ 用户管理
    </div>

    <div class="layui-card-body">
        <h2>用户管理</h2>
        <hr/>
        用户名称：<input type="text" name="username" class="layui-input" style="width: 250px;font-size:small;
        display: inline;" placeholder="请输入"> &emsp;
        <button  lay-submit  lay-filter="select" class="layui-btn layui-btn-normal layui-btn-sm"  style="margin-left: 20px;"
        >查询</button>&emsp;
        <input id="del" type="button" class="layui-btn layui-btn-normal layui-btn-sm" value="删除">


        <table id="demo" lay-filter="test"></table>
    </div>
    </form>
</div>
</div>


</body>
<script src="<c:url value='/res/tool/layui/layui.js'/>"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,method: 'post'
            ,height: 312
            ,url: '<%=request.getContextPath()%>/user/table' //数据接口
            ,where: {
                <c:if test="${!empty username}">"username":'${username}'</c:if>
            }
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:1 //一页显示多少条
                ,limits:[1,2,3]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页

            }
            ,parseData: function(res){ //res 即为原始返回的数据
                console.log(res);
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": ${count}, //解析数据长度
                    "data": res//解析数据列表
                };
            }
            ,cols: [[ //表头
                { width:80, sort: true, fixed: 'left',type:"checkbox"}
                ,{field: 'id', title: '用户编号', width:140, sort: true, fixed: 'left'}
                ,{field: 'userNames', title: '用户名', width:120,sort:true}
                ,{field: 'nations', title: '名族', width:100, sort: true}
                ,{field: 'tel', title: '电话号码', width:160,sort:true}
                ,{field: 'suozaidi', title: '户籍', width: 150,sort:true}
                ,{field: 'sexs', title: '性别', width: 160, sort: true}
                ,{field: 'sfznumber', title: '身份证号码', width: 200, sort: true}
            ]]
        });

        table.on('checkbox(test)', function(obj){
            console.log(obj.checked);//当前是否选中状态
            var id=obj.data.id;
            console.log(obj.data);
            console.log(id);
            $("#del").click(function () {

                if(obj.checked==true){

                    $.ajax({
                        type:"post",
                        url:"<%=request.getContextPath()%>/user/dels",
                        data:{
                            "id":id
                        },
                        dataType:"json",
                        success:function (result){
                            alert("删除成功")
                            location.replace(document.referrer);
                        },
                    });
                };

            })

            // console.log(obj.data.fjid);
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

    });


</script>
</html>
